<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>统计分析</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <script type="text/javascript" src="${s.base}/lib/echarts/echarts-all.js"></script>
</head>
<style type="text/css">
     body,html,wrap-container,column-content-detail{background:#f2f2f2;}
    .layui-col-block{background:#fff;width:calc(100% - 40px);height:100%;padding:10px 20px;}
    .layui-col-block-tit{font-size:18px;color:#404040;font-weight:600;}
    .echart-line{width:100%;}
</style>
<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail" style="background:#f2f2f2;">
        <form class="layui-form">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md8">
                        <div class="layui-col-block">
                            <div class="layui-col-block-tit">各班级男女比例分析</div>
                            <div class="echart-line" style="height:360px" id="sexprop"></div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-col-block">
                            <div class="layui-col-block-tit">整体性别分析</div>
                            <div class="echart-line" style="height:360px" id="sexanalysis"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <div class="layui-col-block">
                            <div class="layui-col-block-tit">生源地分析</div>
                            <div class="echart-line" style="height:360px" id="birthplace"></div>
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>

<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    var tableIns = null;
    var menuId = parent.getTabId();
    var applyId = '${applyId}';
    layui.use(['jquery', 'table', 'page', 'dialog'], function () {
        var $ = layui.jquery,
            page = layui.page,
            table = layui.table,
            dialog = layui.dialog;
        sexProp();
        sexAnalysis();
        birthPlace();
    });
    //各班级男女比例分析
    function sexProp() {
        var myChart = echarts.init(document.getElementById('sexprop'));
        var data=new Array;
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['男','女'],
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : '${className}'.split(",")
                }
            ],
            yAxis : [
                {
                    type : 'value',

                }
            ],
            series : [
                {
                    name:'男',
                    type:'bar',
                    data:'${classBoyNum}'.split(","),
                    // barCateGoryGap:20,
                    barGap: '100%', // Make series be overlap
                    barCategoryGap:'70%',
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color:"#5D8CFF"
                        }
                    }

                },
                {
                    name:'女',
                    type:'bar',
                    data:'${classGirlNum}'.split(","),
                    barCategoryGap:'70%',
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color:"#ffa95d"
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    //整体性别分析
    function sexAnalysis(){
        var myChart = echarts.init(document.getElementById('sexanalysis'));
        var data=new Array;
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '',
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'right',
                x : 'right',
                data:['男','女']
            },

            calculable : true,
            series : [
                {
                    name:'学生性别统计',
                    type:'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:'${boyAll}', name:'男'},
                        {value:'${girlAll}', name:'女'},
                    ],
                    itemStyle: {
                        normal:{
                            color:function(params) {
                                //自定义颜色
                                var colorList = [
                                    '#5D8CFF', '#12b998', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
    //生源地分析
    function birthPlace(){
        var myChart = echarts.init(document.getElementById('birthplace'));
        var data=new Array;
        // 指定图表的配置项和数据
        var option = {
            title : {
                text: '',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['生源地']
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : '${schoolName}'.split(",")
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'生源地',
                    type:'bar',
                    data:'${schoolNum}'.split(","),
                    barWidth:40,
                    itemStyle: {
                        normal: {
                            //这里是重点
                            color:"#5D8CFF"
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
</body>
</html>